<ng-template #renderItemTemplate let-type let-page="page">
  <a class="apes-pagination-item-link" *ngIf="type==='pre'"><i apes-icon apesType="left"></i></a>
  <a class="apes-pagination-item-link" *ngIf="type==='next'"><i apes-icon apesType="right"></i></a>
  <a *ngIf="type=='page'">{{ page }}</a>
</ng-template>
<ng-template #colGroupTemplate>
  <colgroup>
    <col [style.width]="width" [style.minWidth]="width" *ngFor="let width of apesWidthConfig">
    <col [style.width]="th.apesWidth" [style.minWidth]="th.apesWidth" *ngFor="let th of listOfApesThComponent">
  </colgroup>
</ng-template>
<ng-template #headerTemplate>
  <ng-template [ngTemplateOutlet]="colGroupTemplate"></ng-template>
  <thead class="apes-table-thead" *ngIf="!apesScroll.y">
    <ng-template [ngTemplateOutlet]="apesTheadComponent?.templateRef"></ng-template>
  </thead>
</ng-template>
<ng-template #tableInnerTemplate>
  <div #tableHeaderElement
    *ngIf="apesScroll.y"
    [ngStyle]="headerBottomStyle"
    class="apes-table-header">
    <table [class.apes-table-fixed]="apesScroll.x" [style.width]="apesScroll.x">
      <ng-template [ngTemplateOutlet]="colGroupTemplate"></ng-template>
      <thead class="apes-table-thead" *ngIf="apesScroll.y">
        <ng-template [ngTemplateOutlet]="apesTheadComponent?.templateRef"></ng-template>
      </thead>
    </table>
  </div>
  <div #tableBodyElement *ngIf="!apesVirtualScroll;else scrollViewTpl"
    class="apes-table-body"
    [style.maxHeight]="apesScroll.y"
    [style.overflow-y]="apesScroll.y ? 'scroll' : ''"
    [style.overflow-x]="apesScroll.x ? 'auto' : ''">
    <table [class.apes-table-fixed]="apesScroll.x" [style.width]="apesScroll.x">
      <ng-template [ngIf]="!apesVirtualScroll" [ngTemplateOutlet]="headerTemplate"></ng-template>
      <ng-content></ng-content>
    </table>
  </div>
  <ng-template #scrollViewTpl>
    <cdk-virtual-scroll-viewport
      class="apes-table-body"
      [hidden]="!data.length"
      [itemSize]="apesVirtualItemSize"
      [maxBufferPx]="apesVirtualMaxBufferPx"
      [minBufferPx]="apesVirtualMinBufferPx"
      [style.height]="apesScroll.y">
      <table [class.apes-table-fixed]="apesScroll.x" [style.width]="apesScroll.x">
        <ng-template [ngIf]="apesVirtualScroll" [ngTemplateOutlet]="headerTemplate"></ng-template>
        <tbody>
          <ng-container *cdkVirtualFor="let item of data; let i = index; trackBy:apesVirtualForTrackBy;">
            <ng-template [ngTemplateOutlet]="apesVirtualScrollDirective?.templateRef" [ngTemplateOutletContext]="{$implicit:item, index:i}"></ng-template>
          </ng-container>
        </tbody>
      </table>
    </cdk-virtual-scroll-viewport>
  </ng-template>
  <div class="apes-table-placeholder" *ngIf="data.length === 0 && !apesLoading && !apesTemplateMode">
    <apes-embed-empty [apesComponentName]="'table'" [specificContent]="apesNoResult"></apes-embed-empty>
  </div>
  <div class="apes-table-footer" *ngIf="apesFooter">
    <ng-container *apesStringTemplateOutlet="apesFooter">{{ apesFooter }}</ng-container>
  </div>
</ng-template>
<ng-template #paginationTemplate>
  <apes-pagination *ngIf="apesShowPagination && data.length"
    [apesInTable]="true"
    [apesShowSizeChanger]="apesShowSizeChanger"
    [apesPageSizeOptions]="apesPageSizeOptions"
    [apesItemRender]="apesItemRender"
    [apesShowQuickJumper]="apesShowQuickJumper"
    [apesHideOnSinglePage]="apesHideOnSinglePage"
    [apesShowTotal]="apesShowTotal"
    [apesSize]="apesSize === 'default' ? 'default' : 'small'"
    [apesPageSize]="apesPageSize"
    [apesTotal]="apesTotal"
    [apesSimple]="apesSimple"
    [apesPageIndex]="apesPageIndex"
    (apesPageSizeChange)="emitPageSizeOrIndex($event,apesPageIndex)"
    (apesPageIndexChange)="emitPageSizeOrIndex(apesPageSize,$event)">
  </apes-pagination>
</ng-template>
<apes-spin [apesDelay]="apesLoadingDelay" [apesSpinning]="apesLoading" [apesIndicator]="apesLoadingIndicator">
  <ng-container *ngIf="apesPaginationPosition === 'both' || apesPaginationPosition === 'top'">
    <ng-template [ngTemplateOutlet]="paginationTemplate"></ng-template>
  </ng-container>
  <div #tableMainElement
    class="apes-table"
    [class.apes-table-fixed-header]="apesScroll.x || apesScroll.y"
    [class.apes-table-bordered]="apesBordered"
    [class.apes-table-default]="apesSize === 'default'"
    [class.apes-table-middle]="apesSize === 'middle'"
    [class.apes-table-small]="apesSize === 'small'">
    <div class="apes-table-title" *ngIf="apesTitle">
      <ng-container *apesStringTemplateOutlet="apesTitle">{{ apesTitle }}</ng-container>
    </div>
    <div class="apes-table-content">
      <ng-container *ngIf="apesScroll.x || apesScroll.y; else tableInnerTemplate">
        <div class="apes-table-scroll">
          <ng-template [ngTemplateOutlet]="tableInnerTemplate"></ng-template>
        </div>
      </ng-container>
    </div>
  </div>
  <ng-container *ngIf="apesPaginationPosition === 'both' || apesPaginationPosition === 'bottom'">
    <ng-template [ngTemplateOutlet]="paginationTemplate"></ng-template>
  </ng-container>
</apes-spin>
